<template>
    <div>
        <div class="box">
            <ul class="left">
                <li class="item" @click="fn(item.id)" :class="{current:item.id === current}" v-for="item in dataList"
                    :key="item.id">
                    <div>{{item.name}}</div>
                </li>
            </ul>
            <div class="right">
                <div class="content" ref="content">
                    <div class="item" v-for="item in contentList" :key="item.id">
                        <img :src="item.pic">
                        <div class="text">
                            <p class="title">{{item.name}}</p>
                            <p class="price">￥{{item.originalPrice}}</p>
                        </div>
                    </div>
                </div>
                <span>没有更多了~</span>
            </div>
        </div>
    </div>
</template>

<script>
import axios from "axios"
export default {
    data() {
        return {
            dataList: [],
            contentList: [],
            current: "",
        }
    },
    methods: {
        getLeft() {
            axios({
                method: "get",
                url: "https://api.it120.cc/xiaochengxu/shop/goods/category/all"
            }).then(res => {
                let data = res.data.data
                this.fn(data[0].id)
                this.current = data[0].id
                data.forEach(item => {
                    this.dataList.push(item)
                });
            })
        },
        fn(id) {
            this.contentList = []
            this.current = id
            const params = {
                categoryId: id
            }
            axios({
                method: "post",
                url: "https://api.it120.cc/xiaochengxu/shop/goods/list/v2",
                data: params,
                headers: {
                    'content-type': 'application/x-www-form-urlencoded'
                }
            }).then(res => {
                if (res.data.data) {
                    res.data.data.result.forEach(item => {
                        this.contentList.push(item)
                    })
                }
            });
        },
    },
    mounted() {
        this.getLeft()
    },
}
</script>

<style scoped>
.box {
    /* width: 100%; */
    display: flex;
    padding-bottom: 2rem;
    padding-left: 4rem;
}

/* 左侧导航 */
.left {
    width: 4rem;
    height: calc(100vh - 2rem);
    overflow: auto;
    position: fixed;
    left: 0;
    background: #f7f8fa;
}

.left .item {
    width: 100%;
    height: 2.4rem;
    line-height: 2.4rem;
    text-align: center;
    font-size: .56rem;
}

.left .current {
    background: white;
    position: relative;
}


.left>.current::before {
    content: "";
    width: 0.1rem;
    height: 0.6rem;
    top: 50%;
    left: 0;
    background: #1ba784;
    position: absolute;
    transform: translateY(-50%);
}

/* 右侧内容 */
.right {
    width: 11rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px .2rem;
}

.right .content {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

.content .item {
    width: 5.1rem;
    margin-top: .2rem;
}

.content .item .text {
    padding: .3rem;
}

.content .item img {
    width: 5.1rem;
    height: 5.1rem;
}

.content .item .title {
    font-size: .56rem;
    height: 1.44rem;
    width: 4.3rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.content .item .price {
    font-size: .72rem;
    height: .84rem;
    width: 4.3rem;
    color: #07c160;
}

.right span {
    font-size: 0.56rem;
    color: #dcdee0;
    height: 2rem;
    line-height: 2rem;
}
</style>

